<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../../polymer.html">
  <link rel="import" href="../../../src/lib/experimental/patch-dom.html">
</head>
<body>

  <x-test>
    <header>header 1</header>
    <footer>footer 1</footer>
  </x-test>

  <dom-module id="x-test">
    <template>
      <style>
        :host {
          display: block;
          border: 2px solid black;
          padding: 8px;
          margin: 8px;
        }

        .header {
          background: steelblue;
        }

        .content {
          margin: 10px;
          background: beige;
        }

        .footer {
          background: tomato;
        }
      </style>
      <div>User headers...</div>
      <div class="header"><content select="header"></content></div>
      <div class="content">Element content...</div>
      <div>User footers...</div>
      <div class="footer"><content select="footer"></content></div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'x-test'});
    });
    </script>
  </dom-module>

  <script>
    addEventListener('WebComponentsReady', function() {
      var test = document.querySelector('x-test');
      console.log('should not find anything:', 
        document.querySelector('.content'),
        test.querySelector('.content'));
      var f = document.createElement('footer');
      f.textContent = 'dynamic footer';
      test.insertBefore(f, test.lastElementChild);
      var h = document.createElement('header');
      h.textContent = 'dynamic header';
      test.appendChild(h);

    })
  </script>

</body>
</html>
